<template>
  <div class="box">
    <main>

<!--      登录注册-->
      <div class="loginout">
        <div class="loginTop"></div>
        <div class="loginin">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="账号" >
              <el-input v-model="formLabelAlign.username" placeholder="用户名">
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formLabelAlign.password" show-password>
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
          </el-form>
            <el-button type="primary" @click="login" plain>登录</el-button>
          <el-popover placement="top-start" title="提示" trigger="hover" content="管理员无法注册">
            <el-button type="primary" :disabled="BTNstatus" plain @click="Regis" slot="reference">注册</el-button>
           </el-popover>
          <br>
          <br>
          <template>
            <el-radio v-model="radio" label="1" @change="free_btn">用户</el-radio>
            <el-radio v-model="radio" label="2" @change="ban_btn" >管理员</el-radio>
          </template>
        </div>
      </div>
    </main>
<!--      <footer>Footer</footer>-->
  </div>
</template>

<script>
export default {
  name: "box",
  data() {
    return {
      BTNstatus: false,
      labelPosition: 'right',
      formLabelAlign: {
        username: '',
        phone: '',
        email: '',
        password:''
      },
      radio: '1',
      visible: false,
    };
  },
  methods:{
    login(){
      let _this=this;
      if(this.radio==="1"){
        this.$router.push("/user");
      }
      else if(this.radio==="2"){
        this.$router.push("/admin");
      }
      // if(this.formLabelAlign.username===""||this.formLabelAlign.password==="")
      // {
      //   alert("账号或密码为空，请登录")
      // }
      // if(this.formLabelAlign.username==="123"&&this.formLabelAlign.password=="123"&&this.radio==="1")
      // {alert("用户，欢迎您登陆")
      //   this.$router.push("/user");
      //   this.axios(
      //     {
      //       method:'post',
      //       baseurl:'/component/login-box',
      //       data:_this.formLabelAlign
      //     }).then(res=>
      //     {
      //       console.log(res.data);
      //       this.changeLogin({Authorization:_this.userToken})
      //     }
      //   )
      // }
      // if(this.formLabelAlign.username!=""&&this.formLabelAlign.password!=""&&this.formLabelAlign.username!="123")
      // {
      //   alert("密码或者账号错误")
      // }
      // if(this.formLabelAlign.username==="123"&&this.formLabelAlign.password=="123"&&this.radio==="2")
      // {
      //   alert("欢迎管理员登陆！")
      //   this.$router.push("/admin");
      // }
    },
    ban_btn(){
        this.BTNstatus=true;
    },
    free_btn(){
      this.BTNstatus=false;
    },
    Regis(){

        this.$router.push("/register-box");
    }
  }
}
</script>

<style scoped>
.box {
  position: relative;
  z-index: 2333;
  height: 100vh;
  width: 80vw;
  display: inline;
  float: right ;
}

.loginout{
  width: 400px;
  margin: 18% 20% auto;
  border:2px solid #bed2d2;
}
.loginTop{
  height: 50px;
  margin: 0 15% auto;
}

.loginin{
  margin-block-end: 10px;
  margin: 10px 20px auto auto;
}

</style>
